<template>
    <div class='container'>
        <div class="title">
            近七天告警趋势
        </div>

        <div id="main4" style="width: 100%; height: 82%"></div>

    </div>
</template>

<script>
import * as echarts from "echarts";
import {
    reqSevenDayAlarm,
} from "@api/apiDatav.js";
import { mapState } from "vuex";

export default {
    components: {
    },
    data() {
        return {
            option: {
                color: '#09E2F8',
                // 分别控制 canvas 距离容器四周的距离
                grid: {
                    // left: '3%', //默认10%
                    // right: '4%', //默认10%
                    // bottom: '8%', //默认60
                    top: "15%",
                    left: "5%",//默认10%
                    right: "10%",//默认10%
                    bottom: "5%",//默认60
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                // 提示框设置
                tooltip: {
                    trigger: "axis", //触发类型——坐标轴
                    // 鼠标移入条目下面的背景
                    axisPointer: {
                        type: "line",
                        z: 0,
                        lineStyle: {
                            color: "rgba(225,225,225,.3)",
                        },
                    },
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    boundaryGap: false,//紧挨边缘
                    //设置坐标轴字体颜色和宽度
                    axisLine: {  //这是x轴文字颜色
                        lineStyle: {
                            color: "#A9AFC8",
                        }
                    },
                    // 单独隐藏刻度线
                    axisTick: {
                        show: false,
                    },

                },
                yAxis: {
                    type: 'value',
                    //设置坐标轴字体颜色和宽度
                    axisLine: {  //这是x轴文字颜色
                        lineStyle: {
                            color: "#A9AFC8",
                        }
                    },
                    // 单独隐藏刻度线
                    axisTick: {
                        show: false,
                    },
                    //网格线
                    splitLine: {
                        show: true, //隐藏或显示
                        lineStyle: {
                            color: "#A9AFC8",
                            type: 'dashed'//设置网格线类型 dotted：虚线 solid:实线
                        }
                    },
                    axisLabel: {
                        formatter: function (value, index) {
                             // 检查值是否为整数
                            if (Number.isInteger(value)) {
                                // 如果是整数，返回该值
                                return value;
                            } else {
                                // 如果不是整数，返回空字符串以隐藏标签
                                return '';
                            }
                            // 只显示0和1，其他值不显示
                            // return value === 0 || value === 1 ? value.toString() : '';
                        }
                    },
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true,
                        // 线条样式
                        lineStyle: {
                            color: '#09E2F8',
                            type: 'solid'//可选值还有 dotted  solid
                        }
                    }
                ]
            },
        }
    },
    computed: {
        ...mapState(["datav"]),
    },
    watch: {
           // 当有实时告警，即刻更新最新数据
           'datav.infoSent'(val) {
            // console.log(val);
            this.option.series[0].data[0]++;
            this.getCahrt()
        },
    },
    methods: {
        // 避免缩成一团
        getDispose(){
            var myChart = echarts.init(document.getElementById('main4'));
            myChart.dispose();//清除 ECharts 实例
        },
        getCahrt() {
            var chartDom = document.getElementById("main4");
            var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
            let listener = function () {
                deviceType.resize();
            };
            window.addEventListener("resize", listener);
            this.option && deviceType.setOption(this.option); // 使用指定的配置项和数据显示图表。
        },
        // 单位最近七天告警
        async getSevenDayAlarm() {
            let res = await reqSevenDayAlarm(this.datav.orgarr.id);
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.option.xAxis.data=[]
            this.option.series[0].data=[]
             // 时间日期排序
            res.data.row.sort((a,b) => {
                return a.data < b.data ? 1 : -1
            })
            res.data.row.forEach(item=>{
                this.option.xAxis.data.push(item.data)
                this.option.series[0].data.push(item.count)
            })
            await this.getCahrt()
        }
    },
    created() {
    },
    mounted() {
    }
}
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600
    }
}
</style>